import { Button, Input, Carousel, Card } from "antd";
import { HeaderLayout } from "@/layouts/header/index";
import "./index.less";
import BannerImg from "@/assets/banner-img.svg";
import logo from "@/assets/logo.svg";

export const WelcomePage = () => {
  const onChange = (currentSlide: number) => {
    console.log(currentSlide);
  };
  return (
    <div className="welcome">
      <HeaderLayout hiddenNav={true} />
      <div className="welcome-banner">
        <img src={BannerImg} alt="" />
        <div className="welcome-left">
          <h1>快速探索</h1>
          <h1>创建一个项目</h1>
          <Button style={{ width: "144px", height: "44px" }} type={"primary"}>
            新建项目
          </Button>
        </div>
      </div>
      <div className="welcome-container">
        <div className="welcome-container-header">
          <h2>全部项目</h2>
          <p>您当前拥有共计12个项目，可搜索查询</p>
          <Input
            className="welcome-container-header-input"
            placeholder={"项目名称"}
            style={{ width: "240px" }}
          />
        </div>
        <div className="welcome-list">
          <Carousel afterChange={onChange}>
            <div className="welcome-list-box">
              {Array.from({ length: 8 }).map((i, index) => (
                <div key={index} className="welcome-list-item">
                  <div className="item-logo-name">
                    <img
                      src={logo}
                      width={32}
                      style={{ marginRight: "8px" }}
                      alt=""
                    />
                    <span>海纳超级OA</span>
                  </div>
                  <p>2023-08-31</p>
                </div>
              ))}
            </div>
            <div className="welcome-list-box">
              {Array.from({ length: 8 }).map((i, index) => (
                <div key={index} className="welcome-list-item">
                  <div className="item-logo-name">
                    <img
                      src={logo}
                      width={32}
                      style={{ marginRight: "8px" }}
                      alt=""
                    />
                    <span>海纳超级OA</span>
                  </div>
                  <p>2023-08-31</p>
                </div>
              ))}
            </div>
          </Carousel>
        </div>
      </div>
    </div>
  );
};
